<script setup lang="ts">
import { defineAsyncComponent, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { TabPane, Tabs } from 'ant-design-vue';
import { Hints, Modal } from '@xcan-angus/vue-ui';
import { useAuthPermissions } from './composables/useAuthPermissions';
import { AuthObjectType as AuthObjectTypeEnum } from '@xcan-angus/infra';

const { t } = useI18n();

// Async components
const GroupSet = defineAsyncComponent(() => import('@/views/report/home/auth/GroupSet.vue'));
const AuthSet = defineAsyncComponent(() => import('@/views/report/home/auth/AuthSet.vue'));

/**
 * Props interface for authorization management component
 */
interface Props {
  projectId: string;
  appId: string;
  visible: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  projectId: undefined,
  appId: undefined,
  visible: false
});

const emit = defineEmits<{
  (e:'update:visible', value:boolean):void;
}>();

// Reactive references
const activeKey = ref<'user'|'dept'|'group'>('user');
const checkedUserId = ref<string>();
const checkedGroupId = ref<string>();
const checkedDeptId = ref<string>();

// Use composable for permission management
const { permissions, loaded, init } = useAuthPermissions();

/**
 * Handle cancel action
 */
const cancel = () => {
  emit('update:visible', false);
};

// Initialize permissions
init(props.visible);

// Watch for visibility changes
watch(() => props.visible, (newValue) => {
  if (!newValue) {
    return;
  }

  activeKey.value = 'user';
  checkedUserId.value = undefined;
  checkedGroupId.value = undefined;
  checkedDeptId.value = undefined;
}, { immediate: true });

// Modal body style
const bodyStyle = {
  padding: '0 20px',
  height: 'calc(100% - 70px)'
};
</script>
<!-- TODO 权限页面不展示、调试权限页面与功能 -->
<template>
  <Modal
    :title="t('reportHome.globalAuth.title')"
    :footer="false"
    :visible="props.visible"
    :bodyStyle="bodyStyle"
    style="width: 98%;height: 95%;"
    wrapClassName="authorize-modal-wrapper"
    @cancel="cancel">
    <div class="h-full pt-2">
      <Hints :text="t('reportHome.globalAuth.description')" />
      <Tabs
        v-model:activeKey="activeKey"
        size="small"
        style="height: calc(100% - 18px);">
        <TabPane key="user" :tab="t('organization.user')">
          <GroupSet
            key="user"
            v-model:checkedId="checkedUserId"
            v-model:loaded="loaded"
            type="user"
            class="flex-shrink-0 flex-grow-0 w-75 mr-4"
            :visible="props.visible"
            :appId="props.appId" />
          <AuthSet
            v-if="loaded"
            key="user"
            :type="AuthObjectTypeEnum.USER"
            class="flex-1"
            :projectId="props.projectId"
            :authObjectId="checkedUserId"
            :permissions="permissions" />
        </TabPane>
        <TabPane key="dept" :tab="t('organization.dept')">
          <GroupSet
            key="dept"
            v-model:checkedId="checkedDeptId"
            v-model:loaded="loaded"
            type="dept"
            class="flex-shrink-0 flex-grow-0 w-75 mr-4"
            :visible="props.visible"
            :appId="props.appId" />
          <AuthSet
            v-if="loaded"
            key="dept"
            :type="AuthObjectTypeEnum.DEPT"
            class="flex-1"
            :projectId="props.projectId"
            :authObjectId="checkedDeptId"
            :permissions="permissions" />
        </TabPane>
        <TabPane key="group" :tab="t('organization.group')">
          <GroupSet
            key="group"
            v-model:checkedId="checkedGroupId"
            v-model:loaded="loaded"
            type="group"
            class="flex-shrink-0 flex-grow-0 w-75 mr-4"
            :visible="props.visible"
            :appId="props.appId" />
          <AuthSet
            v-if="loaded"
            key="group"
            :type="AuthObjectTypeEnum.GROUP"
            class="flex-1"
            :projectId="props.projectId"
            :authObjectId="checkedGroupId"
            :permissions="permissions" />
        </TabPane>
      </Tabs>
    </div>
  </Modal>
</template>
<style>
.authorize-modal-wrapper .ant-modal-content {
  height: 100%;
}

.authorize-modal-wrapper  .ant-tabs .ant-tabs-nav {
  margin: 0;
}

.authorize-modal-wrapper  .ant-tabs .ant-tabs-tabpane {
  display: flex;
  padding: 8px 0;
}
</style>
